<template>
	<view class="home-page-container u-flex">
		<view class="page-top status-bar" :style="{height:(((activeItem == 3||activeItem == 0)?220:250)+statusBarHeight)+'rpx'}">
			<view class="page-navbar u-flex u-p-l-30 u-p-r-35">
				<u-icon name="arrow-left" size="44" @click="back()" style="z-index:2;"></u-icon>
				<view class="page-search u-flex" v-if="activeItem === 1">
					<u-input :type="'text'" :focus="false" v-model="searchValue" 
					:clearable="false" placeholder="搜索商品" 
					placeholder-style="color:#666;font-size:28rpx;background:#FEEBBF;" 
					:confirm-type="'搜索'"  
					@input="searchValue = searchValue.replace(/\s+/g,'')" @confirm="inputSearchFn" @change="inputSearchFn"/>
					<view style="background-color: #FFBB1A;border-radius: 26rpx;padding: 6rpx 30rpx;"  @click="inputSearchFn">搜索</view>
				</view>
				<view v-if="activeItem === 0" class="u-text-center page-navbar-title u-font-34" style="">主页</view>
				<view v-if="activeItem === 2" class="u-text-center page-navbar-title u-font-34" style="">活动</view>
				<view v-if="activeItem === 3" class="u-text-center page-navbar-title u-font-34" style="">我的收藏</view>
			</view>
			<view class="u-p-l-35 u-p-r-35 u-m-t-20">
				<view class="shop-info u-p-t-20 u-p-b-20 u-p-l-20 u-p-r-20 u-flex u-col-center">
					<image :src="shopInfo.url?shopInfo.url:defaultLogo" mode="widthFix" class="shop-image u-m-r-30"></image>
					<view class="u-line-1">
						<view class="shop-name u-line-1">{{shopInfo.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="status-bar" :style="{height:(((activeItem === 3||activeItem == 0)?220:250)+statusBarHeight)+'rpx'}"></view>
		<!-- 筛选菜单 -->
		<view class="filter-container" v-if="activeItem == 1">
			<view class="filter-top u-flex u-row-between  u-p-30 u-font-28">
				<view  style="flex:1;" :style="{'color':SortBy == 0?'#ff551a':'#333'}" @click="defaultPrice()">默认</view>
				<view  class="u-flex u-col-center" style="flex:1;" @click="priceSortFn()">
					<view class="u-m-r-4" :style="{'color':(SortBy == 1||SortBy == 2)?'#ff551a':'#333'}">价格</view>
					<view class="u-flex" style="flex-direction: column;position: relative;">
						<view class="iconfont icon-arrow-up-filled filter-up-icon" 
						:style="{'color':SortBy == 1?'#ff551a':'#333','bottom':SortBy == 1?'-20rpx':'-13rpx'}"
						v-show="SortBy != 2"></view>
						<view class="iconfont icon-arrow-up-filled filter-down-icon"
						 :style="{'color':SortBy == 2?'#ff551a':'#333','top':SortBy == 2?'-20rpx':'-13rpx'}"
						 v-show="SortBy != 1"></view>
					</view>
				</view>
				<view  class="u-flex " style="flex:1;border-right: 1rpx solid #cdcdcd;" @click="salesSortFn()">
					<view class="u-m-r-4" :style="{'color':(SortBy == 4||SortBy == 8)?'#ff551a':'#333'}">销量</view>
					<view class="u-flex" style="flex-direction: column;position: relative;">
						<view class="iconfont icon-arrow-up-filled filter-up-icon"
						:style="{'color':SortBy == 4?'#ff551a':'#333','bottom':SortBy == 4?'-20rpx':'-13rpx'}"
						v-show="SortBy != 8"></view>
						<view class="iconfont icon-arrow-up-filled filter-down-icon"
						:style="{'color':SortBy == 8?'#ff551a':'#333','top':SortBy == 8?'-20rpx':'-13rpx'}"
						v-show="SortBy != 4"></view>
					</view>
				</view>
				<view  class="u-flex u-p-l-20" :style="{'color':(this.chooseBrandIds.length!==0||this.chooseClassIds.length!==0||this.brandOwnerIds.length!==0||this.startPrice!=''||this.endPrice!='')?'#ff551a':'#333'}" @click="filterIconClickFn">
					<view class="u-m-r-10">筛选</view>
					<view class="u-flex" style="flex-direction: column;">
						<view class="iconfont icon-shaixuan1"></view>
					</view>
				</view>
			</view>
			<view class="filter-bottom  u-flex">
				<u-dropdown :isFilterMenu="true" @open="dropOpen" @close="handleSearch" ref="filterDropdown" class="filter-drop-container" :active-color="'#ff551a'" :titleStyle="{}" :menu-icon="'arrow-down-fill'" :menu-icon-size="10" >
					<u-dropdown-item title="品牌"  class="asd">
						<view class="slot-content" >
							<view class="u-flex link-view" style="">
								<view class="link-view-item" style="background-color: #FAFAFA;"></view>
								<view class="link-view-item" style="margin: 0 24rpx;"></view>
								<view class="link-view-item" style=""></view>
							</view>
							<view class="filter-brand-dad">
								<u-tabs class="owner-tab" :offset="[6,-40]" :badgeList="chooseBrandCount" :isFilterMenu="true" bg-color="#FAFAFA" :list="ownerList" active-color="#ff551a" :is-scroll="ownerList.length>3" :current="ownersCurrent" @change="ownerChange"></u-tabs>
								<view v-show="brandLoading" class="u-flex u-row-center u-col-center" style="height: 300rpx;">
									<u-loading mode="circle" color="#ff551a" ></u-loading>
								</view>
								<view v-for="(item,index) in ownerList" :key="item.shopId+'ownerItem'" v-show="(ownersCurrent == index)&&!brandLoading">
									<scroll-view scroll-y="true" style="height: 280rpx;">
										<view class="u-flex " style="flex-wrap: wrap;padding: 30rpx 10rpx;box-sizing: border-box;">
											<view v-for="(child,childIndex) in ownerByBrand[item.name]"
											 @click="chooseBrandFn(child.checked,item.name,childIndex,item.shopId)" class="brand-item u-flex"  :key="child.id" >
												<view :style="{'color':child.checked?'#ff551a':'#333','flex':1}" :class="['u-line-1','u-font-28',{'brand-all':ownerByBrand[item.name][0].checked&&childIndex!==0}]">{{child.name}}</view>
												<u-icon name="checkmark" v-if="child.checked" color="#ff551a"></u-icon>
											</view>
										</view>
									</scroll-view>
								</view>
								<view class="u-p-35">
									<view class="btn-group u-flex">
										<view class="filter-reset u-text-center" @click="resetBrandFn">重置</view>
										<view class="filter-confirm u-text-center" @click="submitBtnClickFn()">确定</view>
									</view>
								</view>
							</view >
						</view>
					</u-dropdown-item>
					<u-dropdown-item title="分类" >
						<view class="slot-content" style="background-color: #FAFAFA;">
							<view class="u-flex link-view" >
								<view class="link-view-item"></view>
								<view class="link-view-item" style="margin: 0 24rpx;background-color: #FAFAFA;"></view>
								<view class="link-view-item"></view>
							</view>
							<view class="filter-class-dad">
								<view v-show="classLoading" class="u-flex u-row-center u-col-center" style="height: 300rpx;">
									<u-loading mode="circle" color="#ff551a" ></u-loading>
								</view>
								<view v-if="classList.length === 0&&!classLoading" class="u-p-t-50 u-p-b-50">
									<view class="u-flex u-m-l-30 u-m-r-30" style="flex-direction: column;align-items: center;">
										<image src="/static/home/noMore.png" mode="heightFix" style="height:100rpx;margin: 0 auto;display: block;"></image>
										<text class="u-font-10 u-m-t-6" style="color:#999">没有可筛选的分类</text>
									</view>
								</view>
								<view v-else>
									<scroll-view scroll-y="true" style="height: 400rpx;" v-show="!classLoading">
										<u-collapse :accordion="false" >
											<u-collapse-item class="class-collapse-item" 
											@change="classCollapseChange"
											:disabled="item.children.length === 0" :index="index" v-for="(item, index) in classList" :key="item.id">
											<template #title-all>
												<view  class="u-flex u-row-between u-p-l-20 u-p-r-20 class-header" style="width: 100%;">
													<view class="u-flex">
														<view 
														@click.stop="chooseClassFn($event,'dad',item.checked,index)" 
														:class="['u-flex','u-row-center', 'u-m-r-20', 'choose-class-mark',{'choose-class-mark-active':item.checked}]">
															<u-icon name="checkmark" v-show="item.checked" color="#ff551a" size="24" class="class-icon"></u-icon>
														</view>
														<view>{{item.name}}</view>
													</view>
													<view class="u-flex" v-if="item.children.length!==0">
														<view>{{!item.open?'展开':'收起'}}</view>
														<view :class="['iconfont', 'icon-arrow-up-filled', 'class-down-icon',{'class-down-icon-rotate':item.open}]"></view>
													</view>
												</view>
											</template>
												<view class="class-item-container u-flex" @click.stop="">
													<view class="class-item u-line-1 u-flex" 
													@click="chooseClassFn($event,'child',child.checked,index,childIndex)" 
													v-for="(child,childIndex) in item.children" :key="child.id">
														<view :style="{'color':child.checked?'#ff551a':'#333','flex':1}" 
														:class="['u-line-1','u-font-28']">
															{{child.name}}
														</view>
														<u-icon name="checkmark" v-if="child.checked" color="#ff551a" class="u-m-l-10 u-m-r-10"></u-icon>
													</view>
												</view>
											</u-collapse-item>
										</u-collapse>
									</scroll-view>
									<view class="u-p-35">
										<view class="btn-group u-flex">
											<view class="filter-reset u-text-center" @click="resetClassFn">重置</view>
											<view class="filter-confirm u-text-center" @click="submitBtnClickFn()">确定</view>
										</view>
									</view>
								</view>
							</view >
						</view>
					</u-dropdown-item>
					<u-dropdown-item title="价格区间" >
						<view class="slot-content" style="background-color: #FAFAFA;">
							<view class="u-flex link-view" style="">
								<view class="link-view-item" style=""></view>
								<view class="link-view-item" style="margin: 0 24rpx;"></view>
								<view class="link-view-item" style="background-color: #FAFAFA;"></view>
							</view>
							<view class="price-container u-flex u-row-between u-p-35">
								<view class="price-dad">
									<u-input type="number" placeholder="最低价格"  v-model="startPrice" :clearable="false" input-align="center" placeholder-style="color:#999;font-size:28rpx;text-align:center;"  ></u-input>
								</view>
								<view style="margin: 0 30rpx;">-</view>
								<view class="price-dad">
									<u-input type="number" placeholder="最高价格" v-model="endPrice" :clearable="false" input-align="center" placeholder-style="color:#999;font-size:28rpx;text-align:center;" ></u-input>
								</view>
							</view>
							<view class="u-p-35">
								<view class="btn-group u-flex">
									<view class="filter-reset u-text-center" @click="resetPriceFn">重置</view>
									<view class="filter-confirm u-text-center" @click="submitBtnClickFn()">确定</view>
								</view>
							</view>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<!-- top 占位容器 -->
		<view class="page-content" :style="{'background': activeItem === 3?'#FAE7B9':'#fff'}">
			<!-- <class-list :SellerId="SellerId" v-if="activeItem === 0"></class-list> -->
			<seller-home :SellerId="SellerId" v-if="activeItem === 0"></seller-home>
			<item-list ref="itemList" :SellerId="SellerId" v-if="activeItem === 1" :searchBrand="chooseBrandIds"  :SortBy="SortBy"
			:searchClass="chooseClassIds" :searchOwner="brandOwnerIds" :startPrice="startPrice" :endPrice="endPrice" :keyWords="searchValue"></item-list>
			<activity-list :SellerId="SellerId" v-if="activeItem === 2"></activity-list>
			<collect-list :SellerId="SellerId" ref="collectList" v-if="activeItem === 3"></collect-list>
		</view>
		<!-- tabbar -->
		<view class="page-bot u-flex u-row-around">
			<view class="page-bot-item u-flex" @click="activeItem = 0">
				<u-icon name="home" size="48" :color="activeItem===0?'#ff551a':''"></u-icon>
				<text  class="u-font-28" :style="{color:activeItem===0?'#ff551a':''}">主页</text>
			</view>
			<view class="page-bot-item u-flex" @click="activeItem = 1">
				<u-icon name="bag" size="48" :color="activeItem===1?'#ff551a':''"></u-icon>
				<text  class="u-font-28" :style="{color:activeItem===1?'#ff551a':''}">商品</text>
			</view>
			<view class="page-bot-item u-flex" @click="activeItem = 2">
				<u-icon name="gift" size="48" :color="activeItem===2?'#ff551a':''"></u-icon>
				<text class="u-font-28" :style="{color:activeItem===2?'#ff551a':''}">活动</text>
			</view>
			<view class="page-bot-item u-flex" @click="activeItem = 3">
				<u-icon :name="'star'" size="48" :color="activeItem===3?'#ff551a':''"></u-icon>
				<text class="u-font-28" :style="{color:activeItem===3?'#ff551a':''}">收藏</text>
			</view>
		</view>
		<view class="status-bot"></view>
		<!-- #ifdef APP-PLUS -->
		<view class="status-bot-overflow"></view>
		<!-- #endif -->
		<!-- 右侧抽屉 -->
		<u-popup mode="right" ref="filterPop" @close="handleSearch" :safe-area-inset-bottom="true" :isHaveScorll="false"	@touchmove.native.stop.prevent v-model="filterPopShow" class="filter-pop" width="640" border-radius="30">
			<view class="filter-content u-flex">
				<view class="filter-content-top">
					<view class="u-p-30 u-text-center u-font-28">筛选</view>
				</view>
				<view class="" style="flex:1;overflow: hidden;width: 100%;">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view>
							<view class="filter-pop-item u-p-30">
								<view class="filter-pop-item_title">品牌</view>
								<view class="filter-brand-dad">
									<u-tabs class="owner-tab" :offset="[6,-40]" :badgeList="chooseBrandCount" :isFilterMenu="true" bg-color="#ffffff" :list="ownerList" active-color="#ff551a" :is-scroll="ownerList.length>3" :current="ownersCurrent" @change="ownerChange"></u-tabs>
									<view v-show="brandLoading" class="u-flex u-row-center u-col-center" style="height: 300rpx;">
										<u-loading mode="circle" color="#ff551a" ></u-loading>
									</view>
									<view v-for="(item,index) in ownerList" :key="item.shopId+'ownerItem'" v-show="(ownersCurrent == index)&&!brandLoading">
										<scroll-view scroll-y="true" style="height: 280rpx;">
											<view class="u-flex " style="flex-wrap: wrap;padding: 30rpx 10rpx;box-sizing: border-box;">
												<view v-for="(child,childIndex) in ownerByBrand[item.name]"
												 @click="chooseBrandFn(child.checked,item.name,childIndex,item.shopId)" class="brand-item u-flex"  :key="child.id" >
													<view :style="{'color':child.checked?'#ff551a':'#333','flex':1}" :class="['u-line-1','u-font-28',{'brand-all':ownerByBrand[item.name][0].checked&&childIndex!==0}]">{{child.name}}</view>
													<u-icon name="checkmark" v-if="child.checked" color="#ff551a"></u-icon>
												</view>
											</view>
										</scroll-view>
									</view>
								</view>
							</view>
							<view class="filter-pop-item" style="margin: 20rpx 0;padding: 30rpx 14rpx;">
								<view class="filter-pop-item_title">分类</view>
								<view class="filter-class-dad">
									<view v-show="classLoading" class="u-flex u-row-center u-col-center" style="height: 300rpx;">
										<u-loading mode="circle" color="#ff551a" ></u-loading>
									</view>
									<view v-if="classList.length === 0&&!classLoading" class="u-p-t-50 u-p-b-50">
										<view class="u-flex u-m-l-30 u-m-r-30" style="flex-direction: column;align-items: center;">
											<image src="/static/home/noMore.png" mode="heightFix" style="height:100rpx;margin: 0 auto;display: block;"></image>
											<text class="u-font-10 u-m-t-6" style="color:#999">没有可筛选的分类</text>
										</view>
									</view>
									<view v-else>
										<scroll-view scroll-y="true" >
											<u-collapse :accordion="false">
												<u-collapse-item class="class-collapse-item" 
												@change="classCollapseChange"
												:disabled="item.children.length === 0" :index="index" v-for="(item, index) in classList" :key="item.id">
													<template #title-all>
														<view  class="u-flex u-row-between u-p-l-20 u-p-r-20 class-header" style="width: 100%;">
															<view class="u-flex">
																<view 
																@click.stop="chooseClassFn($event,'dad',item.checked,index)" 
																:class="['u-flex','u-row-center', 'u-m-r-20', 'choose-class-mark',{'choose-class-mark-active':item.checked}]">
																	<u-icon name="checkmark" v-show="item.checked" color="#ff551a" :size="24" class="class-icon"></u-icon>
																</view>
																<view>{{item.name}}</view>
															</view>
															<view class="u-flex" v-if="item.children.length!==0">
																<view>{{!item.open?'展开':'收起'}}</view>
																<view :class="['iconfont', 'icon-arrow-up-filled', 'class-down-icon',{'class-down-icon-rotate':item.open}]"></view>
															</view>
														</view>
													</template>
													<view class="class-item-container u-flex" @click.stop="">
														<view class="class-item u-line-1 u-flex" 
														@click="chooseClassFn($event,'child',child.checked,index,childIndex)" 
														v-for="(child,childIndex) in item.children" :key="child.id">
															<view :style="{'color':child.checked?'#ff551a':'#333','flex':1}" 
															:class="['u-line-1','u-font-28']">
																{{child.name}}
															</view>
															<u-icon name="checkmark" v-if="child.checked" color="#ff551a" class="u-m-l-10 u-m-r-10"></u-icon>
														</view>
													</view>
												</u-collapse-item>
											</u-collapse>
										</scroll-view>
									</view>
									
								</view >
							</view>
							<view class="filter-pop-item u-p-30">
								<view class="filter-pop-item_title">价格区间</view>
								<view class="price-container u-flex u-row-between u-p-35">
									<view class="price-dad">
										<u-input type="number" placeholder="最低价格"  v-model="startPrice" :clearable="false" input-align="center" placeholder-style="color:#999;font-size:28rpx;text-align:center;"  ></u-input>
									</view>
									<view style="margin: 0 30rpx;">-</view>
									<view class="price-dad">
										<u-input type="number" placeholder="最高价格" v-model="endPrice" :clearable="false" input-align="center" placeholder-style="color:#999;font-size:28rpx;text-align:center;" ></u-input>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="u-p-35" style="width: 100%;">
					<view class="btn-group u-flex">
						<view class="filter-reset u-text-center" @click="resetAllFn">重置</view>
						<view class="filter-confirm u-text-center" @click="filterPopSubmitFn()">确定</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import ClassList from './ClassList.vue';
	import ActivityList from './ActivityList.vue'
	import ItemList from './ItemList.vue';
	import CollectList from './CollectList.vue';
	import SellerHome from './SellerHome.vue';
	export default{
		components:{ClassList,ItemList,ActivityList,CollectList,SellerHome},
		data(){
			return {
				activeItem:0,
				SellerId:'',
				shopInfo:{},
				searchValue:'',
				ownerList:[],
				ownersCurrent:0,
		
				ownerByBrand: {},
				classList: [],
				startPrice:'',
				endPrice: '',
				filterPopShow:false,
				SortBy:0,
				brandLoading:false,
				classLoading:false,
				// brandOwnerIds:[],
			}
		},
		computed: {
			// 已经选择的brandID
			chooseBrandIds() {
				let ary = [];
				for (const iterator in this.ownerByBrand) {
					if(!this.ownerByBrand[iterator][0].checked){
						this.ownerByBrand[iterator].forEach(item=>{
							if(item.checked){
								ary.push(item.dad+'_'+item.id );
							}
						})
					}else{
						ary.push(this.ownerByBrand[iterator][0].id+'_'+this.ownerByBrand[iterator][0].id );
					}
				};
				return ary;
			},
			chooseBrandCount(){
				let ary = [];
				for (const iterator in this.ownerByBrand) {
					if(this.ownerByBrand[iterator].length!=0){
						if(!this.ownerByBrand[iterator][0].checked){
							let count = 0;
							this.ownerByBrand[iterator].forEach(item=>{
								if(item.checked){
									count++
								}
							});
							ary.push(count);
						}else{
							ary.push('全部');
						}
					}else{
						ary.push(0)
					}
					
				};
				return ary;
			},
			brandOwnerIds(){
				let ary = [];
				for (const iterator in this.ownerByBrand) {
					if(this.ownerByBrand[iterator][0].checked){
						ary.push(this.ownerByBrand[iterator][0].id);
					}
				};
				return ary;
			},
			chooseClassIds() {
				let ary = [];
				 this.classList.map(item => {
					if(item.checked){
						ary.push(item.id);
					};
					if(item.children.length!==0){
						item.children.map(child=>{
							if(child.checked){
								ary.push(child.id);
							}
						})
					}
					
				});
				return ary;
			},
		},
		onLoad(options) {
			this.SellerId = options.id;
			this.getShopInfo();
		},
		onShow(){
			if(this.activeItem === 3){
				this.$refs.collectList.getGroupList();
			}
		},
		methods:{
			minInput(){
				console.log(arguments);
			},
			inputSearchFn(){
				this.resetAllFn();
				this.handleSearch();
			},
			defaultPrice(){
				this.SortBy = 0;
				this.handleSearch();
			},
			priceSortFn(){
				if(this.SortBy != 1&&this.SortBy != 2){
					this.SortBy = 1;
				}else{
					this.SortBy = this.SortBy==1?2:1;
				}
				console.log(this.SortBy);
				this.handleSearch();
			},
			salesSortFn(){
				if(this.SortBy != 4&&this.SortBy != 8){
					this.SortBy = 4;
				}else{
					this.SortBy = this.SortBy==4?8:4;
				}
				this.handleSearch();
			},
			// 筛选icon点击  打开pop
			filterIconClickFn(){
				if(this.ownerList.length === 0){
					this.getOwnerList();
				}
				if(this.classList.length === 0){
					this.getClassListFn();
				};
				this.filterPopShow = true;
			},
			
			// 分类筛选的 展开和收起判断
			classCollapseChange(data){
				this.classList[data.index].open = data.show;
			},
			resetAllFn(){
				this.resetBrandFn();
				this.resetClassFn();
				this.resetPriceFn();
			},
			// 重置品牌商筛选
			resetBrandFn(){
				for (const iterator in this.ownerByBrand) {
					this.ownerByBrand[iterator].map(item=>{
						item.checked = false;
					})
				};
			},
			// 重置分类选择
			resetClassFn(){
				this.classList.map(item=>{
					item.checked = false;
					if(item.children.length!==0){
						item.children.map(child=>{
							child.checked = false;
						})
					}
					
				})
			},
			// 重置价格筛选
			resetPriceFn(){
				this.startPrice = '';
				this.endPrice = '';
			},
			// 选择分类
			chooseClassFn(event,type,checked,index,childIndex){
				if(type==='dad'){
					this.classList[index].checked = !checked;
					if(this.classList[index].children.length!==0){
						this.classList[index].children.map(item=>{
							item.checked = !checked;
						})
					}
				}else{
					this.classList[index].children[childIndex].checked = !checked;
				}
			},
			// 打开下拉菜单
			dropOpen(index){
				if(this.ownerList.length === 0&&index === 0){
					this.getOwnerList();
				}
				if(this.classList.length === 0&&index === 1){
					this.getClassListFn();
				}
			},
			// 下拉筛选里面的确定按钮点击，关闭下拉菜单，触发关闭事件，刷新商品列表
			submitBtnClickFn(){
				if(Number(this.startPrice)>Number(this.endPrice)){
					this.$u.toast('价格区间筛选格式不正确，请输入正确的价格区间~');
					return false;
				}
				this.$refs['filterDropdown'].close();
			},
			filterPopSubmitFn(){
				if(Number(this.startPrice)>Number(this.endPrice)){
					this.$u.toast('价格区间筛选格式不正确，请输入正确的价格区间~');
					return false;
				}
				this.$refs['filterPop'].close();
			},
			 // 获取分类列表
			async getClassListFn() {
				this.classLoading = true;
			   let params = {
					SellerId: this.SellerId,
					IncludeChildren:true
			   }
			   const res = await this.$newHttp.get('api/v1.2/ShanNiang/GetSellerCategories', { params: params } );
			   this.classLoading = false;
				if (res.code === 200) {
					res.data.map(item => {
						item.checked = false;
						item.open = false;
						item.children.map(child => {
							child.checked = false;
						});
					})
					this.classList = res.data;
			   } else {
				   this.classList = [];
				   this.$message.error('获取分类列表失败，错误信息：'+res.erroMessage)
			   }
			},
			// 品牌商 tab 切换
			ownerChange(index){
				this.ownersCurrent = Number(index);
				let name = this.ownerList[index].name;
				let id = this.ownerList[index].shopId;
				if (this.ownerByBrand[name].length === 0) {
					this.getBrandListByOwner(name,id);
				}else if(this.ownerByBrand[name].length === 1&&this.ownerByBrand[name][0].name === '全部'){
					this.getBrandListByOwner(name,id);
				}
			},
			
			// 选择品牌商品牌筛选
			chooseBrandFn(checked,name,brandIndex,ownerId){
				if(checked){//关
					if (brandIndex == 0) {//如果点击是全部  把brandOwnerIds 里的品牌商ID删除
						// 把点击的brand-item的激活状态改为false
					}
					this.ownerByBrand[name][brandIndex].checked = false;
				}else{//开
					if (brandIndex == 0) {//点击全部
						// 清空所有品牌选择
						this.ownerByBrand[name].map(item => {
							item.checked = false;
						});
						// 把“全部”设为激活状态
						this.ownerByBrand[name][0].checked = true;
						// 把该品牌商ID加入集合中
					} else {
						// 把“全部” 激活状态改为false
						this.ownerByBrand[name][brandIndex].checked = true;
						this.ownerByBrand[name][0].checked = false;
					}
				}
			},
			// 获取品牌商列表
			async getOwnerList(){
				let params = {
					shopId:this.SellerId
				}
				const res = await this.$newHttp.get('api/v1.2/ShanNiang/GetBrandOwners', { params: params } );
				if(res.code === 200){
					this.ownerList = res.data;
					if (res.data.length !== 0) {
						res.data.forEach((item, index) => {
							this.$set(this.ownerByBrand,item.name,[{
								name: '全部',
								id: item.shopId,
								dad:item.shopId,
								checked:false,
							}]);
						});
						this.getBrandListByOwner(res.data[0].name,res.data[0].shopId);
					}
				}else{
					this.$u.toast('获取店铺信息失败')
				}
			},
			
			//根据品牌商获取品牌列表
			async getBrandListByOwner(name,id) {
				this.brandLoading = true;
				let params = {
					pageIndex: 1,
					pageSize: 9999,
					ShopId:id
				};
				const res = await this.$newHttp.get('api/v1.2/ShanNiang/GetBrandsByBrandOwner', { params: params } );
				this.brandLoading = false;
				if (res.code === 200) {
					res.data.list.map(item => {
						item.checked = false;
						item.dad = id;
						this.ownerByBrand[name].push(item);
						// return item; 
					})
					console.log(this.ownerByBrand[name]);
				} else {
					
				}
			},
			
			
			handleSearch(){
				if(this.activeItem === 1){
					this.$refs.itemList.loadAgainFn();
				}else{
					this.activeItem = 1;
				}
			},
			back(){
				if(this.activeItem == 0){
					uni.navigateBack()
				}else{
					this.activeItem = 0;
				}
			},
			async getShopInfo(){
				let params = {
					shopId:this.SellerId
				}
				const res = await this.$newHttp.get('api/v1.2/Shop/GetSeller', { params: params } );
				if(res.code === 200){
					this.shopInfo = res.data;
				}else{
					this.$u.toast('获取店铺信息失败')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css';
	.home-page-container{
		box-sizing: border-box;
		height: 100%;
		background-color: #FAE7B9;
		position: relative;
		overflow: hidden;
		flex-direction: column;
		.page-top{
			background: linear-gradient(180deg, #FFBB1A, #FAE7B9);
			position: fixed;
			z-index:887;
			top: 0;
			left: 0;
			width: 100%;
			padding-top: 40rpx;
			/* #ifdef APP-HARMONY */
			padding-top: var(--status-bar-height);
			/* #endif */
			/* #ifdef APP-PLUS */
			padding-top: var(--status-bar-height);
			/* #endif */
			.page-navbar{
				position: relative;
				.page-navbar-title{
					position: absolute;width: 100%;left: 0;
					font-weight: 500;
				}
				.page-search{
					box-sizing: border-box;
					padding: 0rpx 30rpx;
					background-color: #FEEBBF;
					border: 2rpx solid #BFAA7A;
					border-radius: 60rpx;
					flex:1;
					margin: 0 20rpx;
					// color:#ccc;
				}
			}
			.shop-info{
				background-color: #FEF9ED;
				border-radius: 20rpx;
				.shop-image{
					width: 55rpx;
					height: 55rpx;
					border-radius: 50%;
					box-shadow: 1rpx 5rpx 18rpx 2rpx rgba(39,33,23,0.1);
				}
				.shop-name{
					font-weight: 500;
					font-size: 32rpx;
				}
				.item-mark{
					display: block;
					min-width: 50rpx;
					border-radius: 10rpx;
					box-sizing: border-box;
					color: #fff;
					padding: 6rpx 10rpx;
					font-size: 24rpx;
					text-align: center;
					margin-left: 10rpx;
				}
			}
		}
		.status-bar{
			width: 100%;
		}
		.filter-container{
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			height: 190rpx;
			width: 100%;
			.filter-top{
				.filter-up-icon{
					font-size: 34rpx;
					color: #666;
					position: absolute;
					bottom: -13rpx;
					left: 0rpx;
				}
				.filter-down-icon{
					transform: rotate(180deg);
					font-size: 34rpx;
					color: #666;
					position: absolute;
					left: 0rpx;
					top: -16rpx;
				}
			}
			.filter-bottom{
				.filter-drop-container{
					box-sizing: border-box;
					padding: 0 30rpx;
					
					::v-deep .u-dropdown__menu__item{
						background: #FAFAFA;
						border-radius: 34rpx;
						&:nth-last-of-type(2){
							margin: 0 20rpx;
						}
					}
					::v-deep .filter-dropitem-active{
						border-bottom-left-radius: 0px;
						border-bottom-right-radius: 0px;
					}
					.link-view{
						height: 20rpx;background-color: #fff;box-sizing: border-box;padding: 0 30rpx;
						.link-view-item{
							height: 20rpx;
							flex:1;
						}
					}
					
				}
			}
		}
		.filter-brand-dad{
			background-color: #FAFAFA;border-radius: 30rpx;
			.brand-item{
				width: 33.3%;
				box-sizing: border-box;
				padding: 12rpx 30rpx;
				.brand-all{
					color: #ccc !important;
				}
			}
		}
		.filter-class-dad{
			background-color: #FAFAFA;border-radius: 30rpx;
			padding: 30rpx;
			.class-collapse-item{
				background-color: #fff;
				border-radius: 16rpx;
				border: 1px solid #e7e7e7;
				margin-bottom: 10rpx;
				.class-header{
					.choose-class-mark{
						width: 42rpx;
						height: 42rpx;
						border-radius: 50%;
						box-sizing: border-box;
						border: 2px solid #7c7c7c;
						
					}
					.choose-class-mark-active{
						border-color: #ff551a;
					}
					.class-icon{
						::v-deep .uicon-checkmark{
							font-weight: bolder !important;
						}
					}
					.class-down-icon{
						transform: rotate(180deg);
					}
					.class-down-icon-rotate{
						transition: transform .3s;
						transform: rotate(0deg);
					}
				}
			}
			.class-item-container{
				width: 100%;
				flex-wrap: wrap;
				box-sizing: border-box;
				padding: 0 20rpx 10rpx 20rpx;
				.class-item{
					width: 33.3%;
					box-sizing: border-box;
					padding: 12rpx 0 12rpx 0;
				}
			}
			
		}
		.price-container{
			.price-dad{
				background-color: #fff;
				border: 1px solid #E7E7E7;
				border-radius: 35px;
				box-sizing: border-box;
				padding: 0 20rpx;
			}
		}
		.btn-group{
			border-radius: 50rpx;
			overflow: hidden;
			.filter-reset{
				box-sizing: border-box;
				padding: 24rpx 0;
				flex:1;
				background-color: #DDDDDD;
			}
			.filter-confirm{
				box-sizing: border-box;
				padding: 24rpx 0;
				flex:1;
				background-color: #FFBB1A;
			}
		}
		.owner-tab{
				box-sizing: border-box;
			border-bottom: 2px solid #EAEAEA;
			// ::v-deep.u-tabs-scorll-flex{
			// 	box-sizing: border-box;
			// 	border-bottom: 2px solid #EAEAEA;
			// }
			// ::v-deep.u-scroll-box{
			// 	box-sizing: border-box;
			// 	border-bottom: 2px solid #EAEAEA;
			// }
			::v-deep.u-tab-bar{
				bottom: -4px;
				// bottom: 0px;
			}
		}
		.page-content{
			box-sizing: border-box;
			width: 100%;
			flex:1;
			    overflow: hidden;
				background-color: #fff;
		}
		.page-bot{
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			padding: 14rpx 0;
			box-shadow: 0px 0px 18rpx 2rpx rgba(39,33,23,0.1);
			/* #ifdef APP-PLUS */
			padding-bottom: env(safe-area-inset-bottom);
			/* #endif */
			.page-bot-item{
				flex-direction: column;
			}
		}
		.status-bot{
			box-sizing: border-box;
			width: 100%;
			height: 110rpx;
			/* #ifdef APP-PLUS */
			height: 98rpx;
			/* #endif */
		}
		.status-bot-overflow{
			box-sizing: border-box;
			padding-bottom: env(safe-area-inset-bottom);
			// height: env(safe-area-inset-bottom);
			width: 100%;
		}
		
		.filter-pop{
			::v-deep.u-drawer-content{
				background-color: #f8f8f8;
				.no_scroll-view{
					height: 100%;
				}
			}
			.filter-content{
				height: 100%;
				flex-direction: column;;
				justify-content: space-between;
				overflow: hidden;
				.filter-content-top{
					width: 100%;
					font-weight: bold;
					box-sizing: border-box;
					/* #ifdef APP-PLUS */
					padding-top: var(--status-bar-height);
					/* #endif */
					/* #ifndef APP-PLUS */
					padding-top: 40rpx;
					/* #endif */
				}
				.filter-pop-item{
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 30rpx;
					.filter-pop-item_title{
						font-weight: bold;
						margin-bottom: 20rpx;
					}
					.filter-brand-dad{
						background-color: #fff;border-radius:0rpx;
					}
					.filter-class-dad{
						background-color: #fff;padding: 0;
						.class-collapse-item{
							background-color: #f8f8f8;
							border-radius: 16rpx;
							border: none;
							margin-bottom: 10rpx;
						}
					}
				}
			}
		}
	}	
</style>